<template>
  <div class="input-row">
    <div class="box">
      <div class="input_data">
        <input
          :value="value"
          :id="inputId + id"
          @input="inputChange"
          @compositionstart="onCompositionStart"
          @compositionend="onCompositionEnd"
          @blur="onBlur"
          @focus="isAcitve = true"
          type="text"
          required
        />
        <label>{{ title }}</label>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: () => "",
    },
    value: {
      type: [String, Number],
      default: "",
    },
    id: {
      type: [String, Number],
      default: "0",
    },
    rules: {
      type: Array,
      default: () => {
        return [
          {
            required: false,
            errMsg: undefined,
          },
          // {
          //   type: 'reg',
          //   reg: undefined,
          //   errMsg: undefined,
          // },
          // {
          //   type: 'range',
          //   min: 0, //min或max至少传一个
          //   max: 100000,
          //   errMsg: undefined,
          // },
        ];
      },
    },
  },
  data() {
    return {
      isAcitve: false,
      showingErrMsg: "",
      valid: true,
      inputId: "defaultid",
      lock: false,
    };
  },
  methods: {
    onCompositionStart(e) {
      this.lock = true;
    },

    onCompositionEnd(e) {
      this.$emit("input", e.target.value.trim());
      this.lock = false;
    },

    inputChange(e) {
      if (!this.lock) {
        let val = e.target.value;
        val = val.trim();
        this.$emit("input", e.target.value);
      }
    },

    onBlur(e) {
      let val = e.target.value;
      if (this.trim) val = val.trim();
      this.validate(val);
      this.$emit("onblur");
    },
    validate(val) {
      if (!val) {
        let element = document.querySelector("#" + this.inputId + this.id);
        val = element.value;
        if (this.trim) {
          val = val.trim();
        }
      }
      this.isAcitve = false;
      for (var i = 0; i < this.rules.length; i++) {
        let rule = this.rules[i];
        //必填
        if (rule.required && val.length == 0) {
          this.valid = false;
          this.showingErrMsg = rule.errMsg;
          break;
        }
        //如果填了，做正则判断
        else if (
          rule.hasOwnProperty("type") &&
          rule.type == "reg" &&
          rule.reg &&
          rule.reg.test(val) == false &&
          val.length > 0
        ) {
          this.valid = false;
          this.showingErrMsg = rule.errMsg;
          break;
        }
        //如果填了，做区间判断
        else if (
          rule.hasOwnProperty("type") &&
          rule.type == "range" &&
          val.length > 0
        ) {
          //只设置了最小值
          if (
            rule.hasOwnProperty("min") &&
            !rule.hasOwnProperty("max") &&
            Number(val) < rule.min
          ) {
            this.valid = false;
          }
          //只设置了最大值
          if (
            rule.hasOwnProperty("max") &&
            !rule.hasOwnProperty("min") &&
            Number(val) > rule.max
          ) {
            this.valid = false;
          }
          //同时设置了最大最小值
          if (
            rule.hasOwnProperty("max") &&
            rule.hasOwnProperty("min") &&
            !(Number(val) >= rule.min && Number(val) <= rule.max)
          ) {
            this.valid = false;
          }
          this.showingErrMsg = rule.errMsg;
          break;
        } else if (rule.async) {
          let r = rule.async(val);
          this.valid = r.valid;
          this.showingErrMsg = r.showingErrMsg;
          break;
        } else {
          this.valid = true;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.input-row {
  width: 100%;
  height: 44px;
  border: 1px solid #999;
  border-radius: 6px;
  margin-bottom: 10px;
  position: relative;
  transition: 0.3s;
}
.input-row:hover {
  width: 100%;
  height: 44px;
  border: 1px solid var(--text-color);
  border-radius: 6px;
  margin-bottom: 10px;
  position: relative;
  transition: 0.3s;
}
.box {
  // width: 450px;
  background: #fff;
  // padding: 30px;
  // box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 0 0 0 5px;
  background: var(--conten-bc);
}

.box .input_data {
  height: 30px;
  width: 100%;
  position: relative;
  margin-top: 10px;
}

.box .input_data input {
  display: block;
  height: 100%;
  width: 100%;
  border: none;
  // font-size: 16px;
  // border-bottom: 2px solid silver;
  background: var(--content-bc);
  color: var(--text-color);
  font-size: 12px;
}

.input_data input:focus,
.input_data input:valid {
  outline: 0;
  // border-bottom-color: #4158d0;
}

.input_data input:focus ~ label,
.input_data input:valid ~ label {
  transform: translateY(-12px);
  font-size: 12px;
  color: grey;
}

.box .input_data label {
  position: absolute;
  bottom: 10px;
  left: 0;
  color: grey;
  pointer-events: none;
  transition: all 0.3s ease;
}
</style>